<template>
	<view class="page">
		<view class="flex text-df  justify-between bg-white padding type-box">
			<text class="text-999">已选开店套餐</text>
			<text class="" v-if="type == 0">初级店铺</text>
			<text class="" v-if="type == 1">中级店铺</text>
			<text class="" v-if="type == 2">高级店铺</text>
		</view>
		<view class="bg-white padding-tb solid-bottom" style="width: calc(100% - 60rpx);margin: 0 30rpx;">
			<view class="text-333 text-df padding-bottom-sm">{{i18n['申请信息']}}</view>
			<view class="flex justify-between">
				<view class="apply-type" :class="{ active: info.apply_type == 2 }" @click="handlerChoose(2)">
					{{i18n['公司']}}
				</view>
				<view class="apply-type" :class="{ active: info.apply_type == 1 }" @click="handlerChoose(1)">
					{{i18n['个人']}}
				</view>
			</view>
		</view>
		<block v-if="info.apply_type == 2">
			<view class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom">
				<view class="_left">{{i18n['公司名称']}}</view>
				<view class="_right text-right"><input type="text" :placeholder="i18n['请输入公司名称']"
						v-model="info.company_name" placeholder-class="placeholder" maxlength="16" /></view>
			</view>
			<view class="shop-item bg-white height-100 text-df flex justify-between align-center solid-bottom">
				<view class="_left">{{i18n['公司所在地']}}</view>
				<view class="_right text-right flex align-center justify-end" @click="showMulLinkageThreePicker">
					<text class="text-bf" v-if="!addr">{{i18n['请选择省市区县']}}</text>
					<text class="text-333" v-else>{{ addr }}</text>
					<text class="cuIcon-right margin-left-xs"></text>
				</view>
			</view>
			<view class="shop-item bg-white height-100 text-df flex justify-between align-center solid-bottom">
				<view class="_left">{{i18n['公司详情地址']}}</view>
				<view class="_right text-right"><input type="text" :placeholder="i18n['请输入详细地址']"
						v-model="info.company_address" placeholder-class="placeholder" /></view>
			</view>
			<view class="shop-item bg-white height-100 text-df flex justify-between align-center solid-bottom">
				<view class="_left">{{i18n['统一社会信用码']}}</view>
				<view class="_right text-right"><input type="text" :placeholder="i18n['请输入统一社会信用码']"
						v-model="info.credit_code" placeholder-class="placeholder" maxlength="18" /></view>
			</view>
			<view class="shop-item bg-white padding-tb text-df flex justify-between align-center solid-bottom">
				<view class="_left">{{i18n['营业执照']}}</view>
				<view class="_right text-right flex justify-end">
					<image src="../../static/upload-img.png" class="up-img" @click="upLoadImg(1, 'license')"
						v-if="!licenseThumb.id"></image>
					<view class="img-wrap" v-else>
						<text class="cuIcon-roundclosefill text-666 text-lg close" @click="clearImg('license')"></text>
						<image class="img" :src="licenseThumb.path" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="shop-item bg-white height-100 text-df flex justify-between align-center">
				<view class="_left">{{i18n['法定经营范围']}}</view>
				<view class="_right text-right"><input type="text" :placeholder="i18n['请输入法定经营范围']" v-model="info.range"
						placeholder-class="placeholder" /></view>
			</view>
			<view style="height: 20rpx;background: #f8f8f8;"></view>
			<view
				class="shop-item bg-white height-100 margin-top-sm text-df flex justify-between align-center solid-bottom">
				<view class="_left">{{i18n['法人姓名']}}</view>
				<view class="_right text-right"><input type="text" :placeholder="i18n['请输入姓名']"
						v-model="info.contacts_name" placeholder-class="placeholder" maxlength="6" /></view>
			</view>
			<view class="shop-item bg-white height-100 text-df flex justify-between align-center solid-bottom">
				<view class="_left">{{i18n['法人手机']}}</view>
				<view class="_right text-right">
					<input type="number" maxlength="11" :placeholder="i18n['请输入手机号']" v-model="info.contacts_phone"
						placeholder-class="placeholder" />
				</view>
			</view>
			<view class="shop-item bg-white height-100 text-df flex justify-between align-center solid-bottom">
				<view class="_left">{{i18n['法人身份证']}}</view>
				<view class="_right text-right flex justify-end">
					<input type="idcard" :placeholder="i18n['请输入身份证号']" v-model="info.idcard_no"
						placeholder-class="placeholder" maxlength="18"/>
				</view>
			</view>
			<view class="shop-item bg-white padding-tb text-df flex justify-between align-center solid-bottom">
				<view class="_left">{{i18n['法人身份证正面']}}</view>
				<!-- <view class="_right text-right flex justify-end">
          <view class="up-img" @click="upLoadImg(1, 'positive')" v-if="!positiveThumb.id"></view>
          <view class="img-wrap" v-else>
            <text class="cuIcon-roundclosefill text-666 text-lg close" @click="clearImg('positive')"></text>
            <image class="img" :src="positiveThumb.path" mode="aspectFit"></image>
          </view>
        </view> -->
				<view class="_right text-right flex justify-end">
					<image src="../../static/upload-img.png" class="up-img" v-if="!perPositiveThumb.id"
						@click="upLoadImg(1, 'perPositive')"></image>
					<view class="img-wrap" v-else>
						<text class="cuIcon-roundclosefill text-666 text-lg close"
							@click="clearImg('perPositive')"></text>
						<image class="img" :src="perPositiveThumb.path" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="shop-item bg-white padding-tb text-df flex justify-between align-center ">
				<view class="_left">{{i18n['法人身份证反面']}}</view>
				<!-- <view class="_right text-right flex justify-end">
          <view class="up-img" @click="upLoadImg(1, 'otherSide')" v-if="!otherSideThumb.id"></view>
          <view class="img-wrap" v-else>
            <text class="cuIcon-roundclosefill text-666 text-lg close" @click="clearImg('otherSide')"></text>
            <image class="img" :src="otherSideThumb.path" mode="aspectFit"></image>
          </view>
        </view> -->
				<view class="_right text-right flex justify-end">
					<image src="../../static/upload-img.png" class="up-img" v-if="!perOtherSideThumb.id"
						@click="upLoadImg(1, 'perOtherSide')"></image>
					<view class="img-wrap" v-else>
						<text class="cuIcon-roundclosefill text-666 text-lg close"
							@click="clearImg('perOtherSide')"></text>
						<image class="img" :src="perOtherSideThumb.path" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom">
				<view class="_left">{{i18n['联系人姓名']}}</view>
				<view class="_right text-right"><input type="text" :placeholder="i18n['请输入姓名']"
						v-model="info.contacts_name" placeholder-class="placeholder" maxlength="6"/></view>
			</view>
			<view class="shop-item bg-white height-100 text-df flex justify-between align-center solid-bottom">
				<view class="_left">{{i18n['联系人手机']}}</view>
				<view class="_right text-right">
					<input type="number" maxlength="11" :placeholder="i18n['请输入手机号']" v-model="info.contacts_phone"
						placeholder-class="placeholder" />
				</view>
			</view>
			<view class="shop-item bg-white height-100 text-df flex justify-between align-center solid-bottom">
				<view class="_left">{{i18n['联系人身份证']}}</view>
				<view class="_right text-right"><input type="idcard" :placeholder="i18n['请输入身份证号']"
						v-model="info.idcard_no" placeholder-class="placeholder"  maxlength="18" /></view>
			</view>
			<view class="shop-item bg-white padding-tb text-df flex justify-between align-center solid-bottom">
				<view class="_left">{{i18n['联系人身份证正面']}}</view>
				<view class="_right text-right flex justify-end">
					<image class="up-img" src="../../static/upload-img.png" mode="" v-if="!perPositiveThumb.id"
						@click="upLoadImg(1, 'perPositive')"></image>
					<view class="img-wrap" v-else>
						<text class="cuIcon-roundclosefill text-666 text-lg close"
							@click="clearImg('perPositive')"></text>
						<image class="img" :src="perPositiveThumb.path" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="shop-item bg-white padding-tb text-df flex justify-between align-center ">
				<view class="_left">{{i18n['联系人身份证反面']}}</view>
				<view class="_right text-right flex justify-end">
					<image src="../../static/upload-img.png" class="up-img" v-if="!perOtherSideThumb.id"
						@click="upLoadImg(1, 'perOtherSide')"></image>
					<view class="img-wrap" v-else>
						<text class="cuIcon-roundclosefill text-666 text-lg close"
							@click="clearImg('perOtherSide')"></text>
						<image class="img" :src="perOtherSideThumb.path" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</block>
	<!-- 	<view class="shop-item bg-white padding-tb text-df flex justify-between align-center solid-bottom" style="align-items: flex-start;">
			<view class="_left" style="display: flex; flex-direction: column;">资质证明
			<text class="text-999 text-sm">(选填，最多10张)</text>
			</view>
			<view class="_right text-right flex justify-end" style="flex-direction: column; align-items: flex-end;">
				<image src="../../static/upload-img.png" class="up-img" @click="upLoadImg2(10, 'certificate')"
					v-if="certificateThumb.length < 10"></image>
				<view v-if="certificateThumb.length != 0" style="width: 500rpx; display: flex; flex-wrap: wrap;">
					<view class="img-wrap" v-for="(item, index) of certificateThumb" :key="index" style="width: 230rpx; height: 150rpx; margin-top: 16rpx; margin-left: 16rpx;">
						<text class="cuIcon-roundclosefill text-666 text-lg close"
							@click="clearImg('certificate', index)"></text>
						<image class="img" :src="item.path" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view> -->
		<view class="btn-wrap flex justify-between align-center padding-tb-xl">
			<view class="btn" @click="handlerPre">{{i18n['上一步']}}</view>
			<view class="btn active" @click="handlerNext">{{i18n['下一步']}}</view>
		</view>
		<w-picker mode="region" :value="defVal" default-type="label"  @confirm="onConfirm($event)"
			ref="region">{{i18n['请选择省市区']}}</w-picker>
	</view>
</template>

<script>
	// @see 引入验证，上传图片
	import {
		UploadImage,
		validate
	} from '@/common/utils/index';
	import wPicker from '../../components/w-picker/w-picker.vue';
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				// 营业执照
				licenseThumb: {},
				// 法人身份证正面
				positiveThumb: {},
				// 法人身份证反面
				otherSideThumb: {},
				// 个人身份证正面
				perPositiveThumb: {},
				// 个人身份证反面
				perOtherSideThumb: {},
				// 资质证明
				certificateThumb: [],
				defVal: [], // 默认地址
				addr: '', //地址
				info: {
					contacts_name: '', //联系人/法人
					contacts_phone: '', //联系人电话
					idcard_no: '', //身份证号
					idcard_front: '', //	身份证正面
					idcard_reverse: '', //身份证反面
					company_name: '', //公司名称
					company_province_id: '', //公司所在省ID
					company_city_id: '', //公司所在市ID
					company_district_id: '', //公司所在区ID
					company_address: '', //公司详细地址
					credit_code: '', //公司社会统一信用码
					business_licence: '', //营业执照
					range: '', //	经营范围
					apply_type: 2, //申请类型 1个人2公司
					qualification_certificate: [] //资质证明
				},
				type: ''
			};
		},
		onLoad(option) {
			this.type = option.type
		},
		methods: {
			/**
			 * @func 显示地址选择弹窗
			 */
			showMulLinkageThreePicker() {
				uni.hideKeyboard();
				this.$refs.region.show();
			},
			/**
			 * @description 地址选择回调
			 * @param {Object} val = 地址信息对象
			 */
			onConfirm(val) {
				console.log(val);
				this.info.company_province_id = val.value[0];
				this.info.company_city_id = val.value[1];
				this.info.company_district_id = val.value[2];
				this.addr = val.result;
				if (val.obj.province.label == val.obj.city.label) this.addr = val.obj.city.label + val.obj.area.label;
			},
			// 选择申请类型
			handlerChoose(type) {
				this.info.apply_type = type;
			},
			// 上一步
			handlerPre() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 下一步
			handlerNext() {
				if (this.checkData()) {
					return this.$message.info(this.checkData());
				}
				let store_joinin_id = uni.getStorageSync('store_joinin_id') || 0;
				let store_user_id = uni.getStorageSync('store_user_id') || 0;
				// this.info.qualification_certificate = this.info.qualification_certificate.join(',');
				this.$api
					.post(global.apiUrls.authentication, this.info, {
						header: {
							Storeid: store_joinin_id,
							Userid: store_user_id
						}
					})
					.then(res => {
						console.log(res);
						if (res.data.code == 1) {
							uni.navigateTo({
								url: '/pages/goods/shop/shop-card/index'
							});
						} else {
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			checkData() {
				let info = this.info;
				let str = '';
				if (info.apply_type == 1) {
					if (!info.contacts_name.trim()) return (str = this.i18n['请输入姓名']);
					if (!info.contacts_phone.trim()) return (str = this.i18n['请输入手机号']);
					if (!validate(info.contacts_phone, 'phone')) return (str = this.i18n['手机号输入有误']);
					if (!info.idcard_no.trim()) return (str = this.i18n['请输入身份证号']);
					if (!validate(info.idcard_no, 'idcard')) return (str = this.i18n['身份证号输入有误']);
					if (!info.idcard_front) return (str = this.i18n['请上传身份证正面']);
					if (!info.idcard_reverse) return (str = this.i18n['请上传身份证反面']);
				}
				if (info.apply_type == 2) {
					if (!info.company_name.trim()) return (str = this.i18n['请输入公司名称']);
					if (!this.addr) return (str = this.i18n['请选择公司所在地']);
					if (!info.company_address.trim()) return (str = this.i18n['请输入公司详细地址']);
					if (!info.credit_code.trim()) return (str = this.i18n['请输入社会统一信用码']);
					if (!validate(info.credit_code, "paragraph")) return (str = this.i18n['社会统一信用码有误']);
					if (!info.business_licence) return (str = this.i18n['请上传营业执照']);
					if (!info.range.trim()) return (str = this.i18n['请输入经营范围']);
					if (!info.contacts_name.trim()) return (str = this.i18n['请输入姓名']);
					if (!info.contacts_phone.trim()) return (str = this.i18n['请输入手机号']);
					if (!validate(info.contacts_phone, 'phone')) return (str = this.i18n['手机号输入有误']);
					if (!info.idcard_no.trim()) return (str = this.i18n['请输入身份证号']);
					if (!validate(info.idcard_no, 'idcard')) return (str = this.i18n['身份证号输入有误']);
					if (!info.idcard_front) return (str = this.i18n['请上传身份证正面']);
					if (!info.idcard_reverse) return (str = this.i18n['请上传身份证反面']);
				}
			},
			/**
			 * @param num 一次最多上传几张
			 * @param type license 营业执照  positive 法人身份证正面  otherSide 法人身份证反面  perPositive联系人身份证正面 perOtherSide 联系人身份证反面
			 * @param max 最多上传多上张图片
			 */
			upLoadImg(num, type, max = 1) {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], // 可以指定来源是相册还是相机，默认二者都有
					success: res => {
						console.log(res);
						let list = res.tempFilePaths;
						list.forEach((val, i) => {
							this.uploadUserImg(val, type, list, i);
						});
					}
				});
			},
			upLoadImg2(num, type, max = 1) {
				uni.chooseImage({
					count: 10 - this.certificateThumb.length,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], // 可以指定来源是相册还是相机，默认二者都有
					success: res => {
						console.log(res);
						let list = res.tempFilePaths;
						list.forEach((val, i) => {
							this.uploadUserImg(val, type, list, i);
						});
					}
				});
			},
			/**
			 * @description 上传图片
			 */
			uploadUserImg(blob, type, list, i) {
				// uni.showLoading();
				let _this = this;
				// 开始上传
				new UploadImage([blob], {
					complete: res => {
						console.log(res);
						if (res.length) {
							if (type == 'license') {
								this.licenseThumb = res[0];
								this.info.business_licence = res[0].id;
							}
							if (type == 'positive') {
								this.positiveThumb = res[0];
								this.info.idcard_front = res[0].id;
							}
							if (type == 'otherSide') {
								this.otherSideThumb = res[0];
								this.info.idcard_reverse = res[0].id;
							}
							if (type == 'perPositive') {
								this.perPositiveThumb = res[0];
								this.info.idcard_front = res[0].id;
							}
							if (type == 'perOtherSide') {
								this.perOtherSideThumb = res[0];
								this.info.idcard_reverse = res[0].id;
							}
							if (type == 'certificate') {
								// this.certificateThumb = res[0];
								// this.info.qualification_certificate = res[0].id;
								this.certificateThumb.push(res[0]);
								this.info.qualification_certificate.push(res[0].id)
								console.log(this.certificateThumb, 'this.certificateThumb')
							}
						}
					}
				});
			},
			clearImg(type, index) {
				if (type == 'license') {
					this.licenseThumb = {};
					this.info.business_licence = '';
				}
				if (type == 'positive') {
					this.positiveThumb = {};
					this.info.idcard_front = '';
				}
				if (type == 'otherSide') {
					this.otherSideThumb = {};
					this.info.idcard_reverse = '';
				}
				if (type == 'perPositive') {
					this.perPositiveThumb = {};
					this.info.idcard_front = '';
				}
				if (type == 'perOtherSide') {
					this.perOtherSideThumb = {};
					this.info.idcard_reverse = '';
				}
				if (type == 'certificate') {
					console.log(this.certificateThumb, this.info.qualification_certificate, '1111');
					this.certificateThumb.splice(index, 1);
					this.info.qualification_certificate.splice(index, 1);
					console.log(this.certificateThumb, this.info.qualification_certificate, '2222');
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	page,
	body,
	.page {
		background-color: #FFFFFF;
		min-height: 100vh;
		padding-bottom: 200rpx;
	}

	.type-box {
		border-bottom: solid 20rpx #F8F8F8;
	}

	.apply-type {
		width: 300rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background-color: #F8F8F8;
		border-radius: 4rpx;

		&.active {
			border: 1px solid $theme;
			color: #ffffff;
      background-color: $theme;
		}
	}

	.height-100 {
		height: 100rpx;
	}

	.placeholder {
		color: #bfbfbf;
		font-size: 28rpx;
	}

	.text-bf {
		color: #bfbfbf;
	}

	.shop-item {
		width: calc(100% - 60rpx);
		margin: 0 30rpx;

		._left {
			width: 300rpx;
		}

		._right {
			width: calc(100% - 300rpx);

			.up-img {
				width: 160rpx;
				height: 160rpx;
			}

			.img-wrap {
				width: 160rpx;
				height: 160rpx;
				border: 1px dashed #eeeeee;
				position: relative;

				.close {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
					z-index: 9;
				}

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.btn-wrap {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		width: 100%;
		padding: 0 32rpx;
		z-index: 9999;
		padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
		.btn {
			width: 300rpx;
			height: 88rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 28rpx;
			color: #333;
			background: #ffffff;
			color: $theme;
			border-radius: 44rpx;
			border: 1px solid $theme;

			&.active {
				background: $bgtheme;
				color: #ffffff;
			}
		}
	}
</style>
